<script setup>
import { ref, reactive } from 'vue'

const loginForm = reactive({
  username: '',
  password: '', 
})
const loginRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

const router = useRouter()
const userStore = useUserStore()

const handleLogin = async () => {
  const result = await userStore.login(loginForm.username, loginForm.password)
  if (result.success) {
    router.push('/')
  } else {
    ElMessage.error(result.message)
  }
}
</script>
<template>
    <div class="login-page">
      <el-form
        :model="loginForm"
        class="login-form"
        label-position="left"
      >
      <div class="title-container">
          <h3 class="title">登录</h3>
      </div>

      <el-form-item prop="username">
          <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
          type="text"
          />
      </el-form-item>

      <el-form-item prop="password">
          <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          />
      </el-form-item>

      <el-button
          type="primary"
          style="width:100%;margin-bottom:30px;"
          @click="handleLogin"
          >登录</el-button>
      </el-form>
    </div>
  </template>
  
  <style>
 .login-page{
  .login-form{
   width:350px;
   margin:0 auto;
   padding-top:100px; 
  }
 }
  </style>
  